<template>
  <div class="contentmain">
      <ConfigurationInventory>
      </ConfigurationInventory>
      <el-row>
        <el-col :span="5">
          <el-button type="danger" icon="el-icon-plus" v-if="this.$store.state.shiro" @click="up(0)">批量上架</el-button>
          <el-button type="danger" icon="el-icon-minus" v-if="this.$store.state.shiro" @click="up(1)">批量下架</el-button>
        </el-col>
        <el-col :span="19" style="float:right">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item style="float:right">
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item label="分类" style="float:right">
              <el-select v-model="formInline.goodkinds" placeholder="分类">
                <el-option label="全部" value="-1"></el-option>
                <el-option
                  v-for="item in kindclass"
                  :key="item.gcId"
                  :label="item.gcName"
                  :value="item.gcId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否上架" style="float:right">
              <el-select v-model="formInline.goodup" placeholder="是否上架">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="float:right">
              <el-input v-model="formInline.goodid" placeholder="商品编号"></el-input>
            </el-form-item>
            <el-form-item style="float:right">
              <el-input v-model="formInline.goodname" placeholder="商品名称"></el-input>
            </el-form-item>

          </el-form>

        </el-col>
      </el-row>
      <!-- 头部搜索块 -->

      <el-row>
        <el-col :span="24">
          
           <el-table ref="multipleTable" :data="td" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading" element-loading-text="数据加载中...">
            <el-table-column type="selection" width="55" >
            </el-table-column>
            <el-table-column prop="goodsId" label="商品编号">
            </el-table-column>
            <el-table-column prop="thumImage" label="图片">
              <template slot-scope="scope">
                    <img class="line-image" :src="scope.row.thumImage" style="width: 100px;vertical-align: middle;">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称">
            </el-table-column>
            <el-table-column label="商品分类">
              <template slot-scope="scope">
                <span>{{listkind(scope.row.cateId)}}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="price" label="销售价格">
            </el-table-column> -->
            <el-table-column prop="stockNum" label="库存" v-if="shiro">
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 0" type="info">已下架</el-tag>
                    <el-tag v-if="scope.row.status == 1" type="primary">上架</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="330">
              <template slot-scope="scope">
                <el-button size="mini" style="float:left" @click="handleEdit(scope.$index, scope.row)" v-if="$store.state.shiro">编辑</el-button>
                <el-button size="mini" style="float:left" type="danger" @click="handleDelete(scope.$index, scope.row)" v-if="$store.state.shiro">删除</el-button>
                <el-button size="mini" style="float:left" @click="pzkc(scope.$index, scope.row)">配置库存</el-button>
                <el-button size="mini" style="float:left" @click="ckgd(scope.$index, scope.row)">查看更多</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 表格 -->


      <el-row>
        <el-col :span="8" :offset="16">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="10"
              layout="total, prev, pager, next, jumper"
              :total="pagecount">
            </el-pagination>
        </el-col>
      </el-row>
      <!-- 分页 -->
  </div>
</template>
<script>
import ConfigurationInventory from 'components/ConfigurationInventory/ConfigurationInventory'
import axios from 'axios'
import qs from 'qs'
  export default{
    data(){
          return{
            shiro:!this.$store.state.shiro,
              formInline:{
                goodname:'',
                goodid:'',
                goodup:'',
                goodkinds:''
              },
              goodlist:[],
              currentPage:1,
              td:[{goodsId:1,name:'ssss'}],
              loading:false,
              pagecount:0,
              kindclass:[],
              selection:[],
              options:[{
                value: '-1',
                label: '全部'
              },{
                value: '0',
                label: '下架'
              }, {
                value: '1',
                label: '上架'
              }]
          }
      },
      components:{
        ConfigurationInventory
      },
      activated(){
        var pp=new URLSearchParams()
        if(!this.$store.state.shiro){
          pp.append('shopId',this.$store.state.TOPshopID)
        }
          this.getData(pp)
      },
      mounted(){
        var _this=this
        var pp=new URLSearchParams()
        if(!this.$store.state.shiro){
          pp.append('shopId',this.$store.state.TOPshopID)
        }
        this.getData(pp)
        _this.kindclass=[]
        axios.get('/listXcxGoodsClass.do').then(r=>{
          // console.log(_this.kindclass)
          for(var i=0;i<r.data.response.xcxGoodsClassList.length;i++){
            _this.kindclass.push(r.data.response.xcxGoodsClassList[i])
          }//获取当前商品分类
          // console.log(_this.kindclass)
        })
      },
    methods:{
      listkind(v){//遍历商品分类,对比ID,返回分类名称
        var _this=this
        if(v==""){//这里判断是否有值
          return
        }
          for(var i=0;i<_this.kindclass.length;i++){
            try{
              if(v==_this.kindclass[i].gcId){
                return _this.kindclass[i].gcName
              }
            }catch(e){
              console.log(e)
            }
          }
        },
        ckgd(i,r){//查看进销存
          this.$router.replace({path: '/Detial', query: {id: r.goodsId}})
        },
      handleEdit(index,row){//跳转到商品发布,编辑商品
        // console.log(row.goodsId)
        this.$router.replace({path: '/GoodPush', query: {id: row.goodsId}})
      },
      handleDelete(index,row){//删除
        // console.log(row)
        var _this=this
        this.$confirm('确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var param = new URLSearchParams();
          param.append("xcxGoodsId",row.goodsId);
          param.append("delStatus",1);
          axios.get("/batchUpdateXcxGoodsDelStatus.do",{params:param}).then(r=>{
            if(r.data.code==200){
              _this.$message({
                type: 'success',
                message: '删除成功!'
              });
              let form=this.formInline
              var param=new URLSearchParams()
              form.goodname!=""?param.append('name',form.goodname):null
              form.goodid!=""?param.append('goodsId',form.goodid):null
              form.goodup!=""&&form.goodup!='-1'?param.append('status',form.goodup):null
              form.goodkinds!=""&&form.goodkinds!=-1?param.append('cateId',form.goodkinds):null
              if(!this.$store.state.shiro){
                param.append('shopId',this.$store.state.TOPshopID)
              }
              _this.getData(param)
            }else{
              _this.$message({
                type: 'info',
                message: r.data.message
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      pzkc(i,r){//配置库存,库存部分为组件
        this.$store.commit('ChangeConfigurationInventory',r)
      },
      handleSizeChange(i) {//翻页
        var param = new URLSearchParams();
        param.append("pageNo",i);
        let form=this.formInline
        form.goodname!=""?param.append('name',form.goodname):null
        form.goodid!=""?param.append('goodsId',form.goodid):null
        form.goodup!=""&&form.goodup!='-1'?param.append('status',form.goodup):null
        form.goodkinds!=""&&form.goodkinds!=-1?param.append('cateId',form.goodkinds):null
        if(!this.$store.state.shiro){
          param.append('shopId',this.$store.state.TOPshopID)
        }
        this.getData(param)
      },
      handleCurrentChange(i) {//翻页
        var param = new URLSearchParams();
        param.append("pageNo",i);
        let form=this.formInline
        form.goodname!=""?param.append('name',form.goodname):null
        form.goodid!=""?param.append('goodsId',form.goodid):null
        form.goodup!=""&&form.goodup!='-1'?param.append('status',form.goodup):null
        form.goodkinds!=""&&form.goodkinds!=-1?param.append('cateId',form.goodkinds):null
        if(!this.$store.state.shiro){
          param.append('shopId',this.$store.state.TOPshopID)
        }
        this.getData(param)
      },
      onSubmit(){//搜索提交
        // console.log(this.formInline)
        let form=this.formInline
        if(form.goodname==""&&form.goodid==""&&form.goodup==""&&form.goodkinds==""){
          var pp=new URLSearchParams()
          if(!this.$store.state.shiro){
            pp.append('shopId',this.$store.state.TOPshopID)
          }
          this.getData(param)
        }
        var param=new URLSearchParams()
        form.goodname!=""?param.append('name',form.goodname):null
        form.goodid!=""?param.append('goodsId',form.goodid):null
        form.goodup!=""&&form.goodup!='-1'?param.append('status',form.goodup):null
        form.goodkinds!=""&&form.goodkinds!=-1?param.append('cateId',form.goodkinds):null
        if(!this.$store.state.shiro){
          param.append('shopId',this.$store.state.TOPshopID)
        }
        this.getData(param)
      },
      handleSelectionChange(val){//表格选择记录选择的那些项,作用于批量上下架,
        this.selection=val
      },
      fformterTag(value, row) {//没用,不排除后面有用
        return row.tag === value;
      },
      getData(v){//获取数据,统一使用入参
        var _this=this
        this.loading=true
        this.td=[]
        axios.get('/listXcxGoods.do',{params:v}).then(r=>{
          // console.log(r)
          if(r.data.code!=200){
            if(r.data.message=="not login"&&r.data.code==500){
                _this.$message.error("访问者,请登录")
                router.push('/Login');
                return
            }
            _this.loading=false
            _this.$message.error(r.data.message)
            return
          }
          _this.td=[].concat(r.data.response.xcxGoodsList)
          _this.pagecount=r.data.response.page.totalCount
          _this.loading=false
        })
        
      },
      up(v){//批量上下架,基于this.selection里的值,
        var _this=this
        this.loading=true
        var str=""
        for(var i=0;i<this.selection.length;i++){
          str+=this.selection[i].goodsId+","
        }
        if(v==0){//上架
          var param=new URLSearchParams()
          param.append('xcxGoodsId',str)
          param.append('status',1)
        }else if(v==1){//下架
          var param=new URLSearchParams()
          param.append('xcxGoodsId',str)
          param.append('status',0)
        }
        axios.get("/batchUpdateXcxGoodsStatus.do",{params:param}).then(r=>{
          // console.log(r)
          if(r.data.message=="not login"&&r.data.code==500){
              this.$message.error("访问者,请登录")
              router.push('/Login');
              return
          }
          if(r.data.code==200){
            _this.$message.success('修改成功')
            _this.getData()
            _this.loading=false
          }else{
            _this.$message(r.data.message)
            _this.loading=false
          }
        })
      }
    }
  }
</script>
<style>
</style>
